<template>
    <div class="le-matter le-card">
        <div>
            <el-autocomplete
                class="he-input"
                placeholder="输入分类搜索"
                v-model="search"
                @keydown.enter.native="handleSelect(null)"
                @select="
                    cat => {
                        handleSelect(cat);
                    }
                "
                :trigger-on-focus="false"
                :fetch-suggestions="
                    (queryString, cb) => {
                        querySearch(queryString, cb, 'searchList');
                    }
                "
            >
                <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
            </el-autocomplete>
            <he-link href="goods/groupPublish">
                <el-button type="primary">添加分类</el-button>
            </he-link>
        </div>
        <div class="le-line"></div>
        <div class="flex">
            <div class="flex-sub">
                <div class="he-attr__header">
                    <span class="he-text">一级分类</span>
                </div>
                <div class="he-attr__body">
                    <div class="he-attr__group he-group__title">
                        <span class="he-group__name">分类名称</span>
                        <span class="he-group__sort"
                            >排序
                            <el-popover content="序号越大，排序越靠前" placement="top" trigger="hover" width="180">
                                <i slot="reference" class="el-icon-warning"></i>
                            </el-popover>
                        </span>
                        <span class="he-group__handle">操作</span>
                    </div>
                    <div class="he-group__empty" v-if="first.length === 0">该分类下暂无内容</div>
                    <el-scrollbar style="height: 472px">
                        <div
                            class="he-attr__group"
                            :style="
                                (chooseIndex.first === index ? 'border: 1px solid #623CEB;' : '') +
                                (item.is_show === 1 ? '' : 'background: rgba(0, 0, 0, 0.05);')
                            "
                            @click="chooseClick('first', index)"
                            v-for="(item, index) in first"
                            :key="index"
                            v-show="item.show"
                        >
                            <div class="he-group__name el-row--flex is-align-middle">
                                <el-image
                                    :src="item.icon"
                                    :style="`width: 28px; height: 28px; border-radius: 50%;${
                                        item.is_show == 1 ? '' : 'opacity: 0.5;'
                                    }`"
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="he-title" :style="item.is_show == 1 ? '' : 'color:#BFBFBF;'">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="he-group__sort le_goods__main-goodstitle le_goods__main-sort">
                                {{ item.sort }}
                                <el-popover v-model="item.popover" title=" " trigger="click">
                                    <div class="el-popconfirm">
                                        <p class="el-popconfirm__main">
                                            <el-input v-model="sort"></el-input>
                                        </p>
                                        <div class="el-popconfirm__action">
                                            <el-button size="mini" type="text" @click.stop="cancel(index, 'first')"
                                                >取消
                                            </el-button>
                                            <el-button
                                                size="mini"
                                                type="primary"
                                                @click.stop="sortChange(index, 'first')"
                                                >确定
                                            </el-button>
                                        </div>
                                    </div>
                                    <span @click="editSort(item)" slot="reference">
                                        <he-icon type="le-icon-editor" class="le_goods__main-sortedit"></he-icon>
                                    </span>
                                </el-popover>
                            </div>
                            <div class="he-group__handle">
                                <he-link href="goods/groupPublish" :query="{ id: item.id }">
                                    <el-popover placement="top" trigger="hover" content="编辑">
                                        <i slot="reference" class="le-icon le-icon-fenlei-bianji"></i>
                                    </el-popover>
                                </he-link>
                                <el-popover placement="top" trigger="hover" content="推广">
                                    <i
                                        slot="reference"
                                        title="推广"
                                        top="25vh"
                                        v-popup.promote="{
                                            promoteType: 'group',
                                            data: item,
                                        }"
                                        module="goods"
                                        width="791"
                                        :id="item.id + '_promote1'"
                                        :hide_footer="true"
                                        class="le-icon le-icon-fenlei-fenxiang"
                                    ></i>
                                </el-popover>
                                <el-popover placement="top" trigger="hover" content="删除">
                                    <i
                                        slot="reference"
                                        @click="deleteGroup({ key: 'first', index: index })"
                                        class="le-icon le-icon-fenlei-shanchu"
                                    ></i>
                                </el-popover>
                                <el-popover
                                    placement="top"
                                    trigger="hover"
                                    :content="item.is_show == 1 ? '隐藏' : '显示'"
                                >
                                    <i
                                        slot="reference"
                                        @click="showChange({ key: 'first', index: index })"
                                        style="font-size: 18px"
                                        :class="`le-icon le-icon-${item.is_show == 1 ? 'eye' : 'hidden'}`"
                                    ></i>
                                </el-popover>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="flex-sub">
                <div class="he-attr__header">
                    <span class="he-text">二级分类</span>
                </div>
                <div class="he-attr__body">
                    <div class="he-attr__group he-group__title">
                        <span class="he-group__name">分类名称</span>
                        <span class="he-group__sort"
                            >排序
                            <el-popover content="序号越大，排序越靠前" placement="top" trigger="hover" width="180">
                                <i slot="reference" class="el-icon-warning"></i>
                            </el-popover>
                        </span>
                        <span class="he-group__handle">操作</span>
                    </div>
                    <div class="he-group__empty" v-if="second.length === 0">该分类下暂无内容</div>
                    <el-scrollbar style="height: 472px">
                        <div
                            class="he-attr__group"
                            @click="chooseClick('second', index)"
                            :style="
                                (chooseIndex.second === index ? 'border: 1px solid #623CEB;' : '') +
                                (item.is_show === 1 ? '' : 'background: rgba(0, 0, 0, 0.05);')
                            "
                            v-for="(item, index) in second"
                            :key="index"
                            v-show="item.show"
                        >
                            <div class="he-group__name el-row--flex is-align-middle">
                                <el-image
                                    :src="item.icon"
                                    :style="`width: 28px; height: 28px; border-radius: 50%;${
                                        item.is_show == 1 ? '' : 'opacity: 0.5;'
                                    }`"
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="he-title" :style="item.is_show == 1 ? '' : 'color:#BFBFBF;'">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="he-group__sort le_goods__main-goodstitle le_goods__main-sort">
                                {{ item.sort }}
                                <el-popover v-model="item.popover" title=" " trigger="click">
                                    <div class="el-popconfirm">
                                        <p class="el-popconfirm__main">
                                            <el-input v-model="sort"></el-input>
                                        </p>
                                        <div class="el-popconfirm__action">
                                            <el-button size="mini" type="text" @click.stop="cancel(index, 'second')">
                                                取消
                                            </el-button>
                                            <el-button
                                                size="mini"
                                                type="primary"
                                                @click.stop="sortChange(index, 'second')"
                                                >确定
                                            </el-button>
                                        </div>
                                    </div>
                                    <span @click="editSort(item)" slot="reference">
                                        <he-icon type="le-icon-editor" class="le_goods__main-sortedit"></he-icon>
                                    </span>
                                </el-popover>
                            </div>
                            <div class="he-group__handle">
                                <he-link href="goods/groupPublish" :query="{ id: item.id }">
                                    <el-popover placement="top" trigger="hover" content="编辑">
                                        <i slot="reference" class="le-icon le-icon-fenlei-bianji"></i>
                                    </el-popover>
                                </he-link>
                                <el-popover placement="top" trigger="hover" content="推广">
                                    <i
                                        slot="reference"
                                        title="推广"
                                        top="25vh"
                                        v-popup.promote="{
                                            promoteType: 'group',
                                            data: item,
                                        }"
                                        module="goods"
                                        width="791"
                                        :id="item.id + '_promote1'"
                                        :hide_footer="true"
                                        class="le-icon le-icon-fenlei-fenxiang"
                                    ></i>
                                </el-popover>
                                <el-popover placement="top" trigger="hover" content="删除">
                                    <i
                                        slot="reference"
                                        @click="deleteGroup({ key: 'second', index: index })"
                                        class="le-icon le-icon-fenlei-shanchu"
                                    ></i>
                                </el-popover>
                                <el-popover
                                    placement="top"
                                    trigger="hover"
                                    :content="item.is_show == 1 ? '隐藏' : '显示'"
                                >
                                    <i
                                        slot="reference"
                                        @click="showChange({ key: 'second', index: index })"
                                        style="font-size: 18px"
                                        :class="`le-icon le-icon-${item.is_show == 1 ? 'eye' : 'hidden'}`"
                                    ></i>
                                </el-popover>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="flex-sub">
                <div class="he-attr__header">
                    <span class="he-text">三级分类</span>
                </div>
                <div class="he-attr__body">
                    <div class="he-attr__group he-group__title">
                        <span class="he-group__name">分类名称</span>
                        <span class="he-group__sort"
                            >排序
                            <el-popover content="序号越大，排序越靠前" placement="top" trigger="hover" width="180">
                                <i slot="reference" class="el-icon-warning"></i>
                            </el-popover>
                        </span>
                        <span class="he-group__handle">操作</span>
                    </div>
                    <div class="he-group__empty" v-if="third.length === 0">该分类下暂无内容</div>
                    <el-scrollbar style="height: 472px">
                        <div
                            class="he-attr__group"
                            v-for="(item, index) in third"
                            :key="index"
                            :style="item.is_show === 1 ? '' : 'background: rgba(0, 0, 0, 0.05);'"
                            @click="chooseClick('third', index)"
                            v-show="item.show"
                        >
                            <div class="he-group__name el-row--flex is-align-middle">
                                <el-image
                                    :src="item.icon"
                                    :style="`width: 28px; height: 28px; border-radius: 50%;${
                                        item.is_show == 1 ? '' : 'opacity: 0.5;'
                                    }`"
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <div class="he-title" :style="item.is_show == 1 ? '' : 'color:#BFBFBF;'">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="he-group__sort le_goods__main-goodstitle le_goods__main-sort">
                                {{ item.sort }}
                                <el-popover v-model="item.popover" title=" " trigger="click">
                                    <div class="el-popconfirm">
                                        <p class="el-popconfirm__main">
                                            <el-input v-model="sort"></el-input>
                                        </p>
                                        <div class="el-popconfirm__action">
                                            <el-button size="mini" type="text" @click.stop="cancel(index, 'third')"
                                                >取消
                                            </el-button>
                                            <el-button
                                                size="mini"
                                                type="primary"
                                                @click.stop="sortChange(index, 'third')"
                                                >确定
                                            </el-button>
                                        </div>
                                    </div>
                                    <span @click="editSort(item)" slot="reference">
                                        <he-icon type="le-icon-editor" class="le_goods__main-sortedit"></he-icon>
                                    </span>
                                </el-popover>
                            </div>
                            <div class="he-group__handle">
                                <he-link href="goods/groupPublish" :query="{ id: item.id }">
                                    <el-popover placement="top" trigger="hover" content="编辑">
                                        <i slot="reference" class="le-icon le-icon-fenlei-bianji"></i>
                                    </el-popover>
                                </he-link>
                                <el-popover placement="top" trigger="hover" content="推广">
                                    <i
                                        slot="reference"
                                        title="推广"
                                        top="25vh"
                                        v-popup.promote="{
                                            promoteType: 'group',
                                            data: item,
                                        }"
                                        module="goods"
                                        width="791"
                                        :id="item.id + '_promote1'"
                                        :hide_footer="true"
                                        class="le-icon le-icon-fenlei-fenxiang"
                                    ></i>
                                </el-popover>
                                <el-popover placement="top" trigger="hover" content="删除">
                                    <i
                                        slot="reference"
                                        @click="deleteGroup({ key: 'third', index: index })"
                                        class="le-icon le-icon-fenlei-shanchu"
                                    ></i>
                                </el-popover>
                                <el-popover
                                    placement="top"
                                    trigger="hover"
                                    :content="item.is_show == 1 ? '隐藏' : '显示'"
                                >
                                    <i
                                        slot="reference"
                                        @click="showChange({ key: 'third', index: index })"
                                        style="font-size: 18px"
                                        :class="`le-icon le-icon-${item.is_show == 1 ? 'eye' : 'hidden'}`"
                                    ></i>
                                </el-popover>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
import popconfirm from '@/components/popconfirm.vue';
import HelpHint from './components/helpHint.vue';

export default {
    components: {
        HelpHint,
        popconfirm,
    },
    data() {
        return {
            activeName: 'first',
            search: '', //搜索名称
            searchChoose: null, //输入框选择对象
            searchList: [], //输入框搜索列队
            nameList: {}, //搜索重命名,名称匹配列队
            list: [], //处理后的渲染列队
            first: [],
            second: [],
            third: [],
            chooseIndex: {
                first: 0,
                second: 0,
            },
            sort: 0,
            group_show: 0,
            style_index: 0,
        };
    },
    async mounted() {
        this.getList();
        this.getSetting();
    },
    methods: {
        chooseClick(key, index) {
            this.chooseIndex[key] = index;
            if (key == 'first') {
                this.chooseIndex['second'] = 0;
            }
            this.listBuild();
        },
        listBuild() {
            this.first = this.list;
            this.second = this.first[this.chooseIndex.first].children
                ? this.first[this.chooseIndex.first].children
                : [];
            this.third =
                this.second[this.chooseIndex.second] && this.second[this.chooseIndex.second].children
                    ? this.second[this.chooseIndex.second].children
                    : [];
        },
        getList: function () {
            this.$heshop
                .group('get', { include: 'goods' })
                .then(res => {
                    res = res.map(v => {
                        v.popover = false;
                        v.show = true;
                        return v;
                    });
                    this.list = this.$heshop
                        .toTree({
                            parentKey: 'parent_id',
                            idKey: 'id',
                            parentId: 0,
                            childrenKey: 'children',
                        })
                        .on(res)
                        .get();

                    this.list.forEach(cat1 => {
                        cat1.value = cat1.name;
                        this.searchList.push(cat1);
                        if (cat1.children) {
                            cat1.children.forEach(cat2 => {
                                cat2.type = cat1.type;
                                cat2.value = `${cat1.value} > ${cat2.name}`;
                                this.searchList.push(cat2);
                                if (cat2.children) {
                                    cat2.children.forEach(cat3 => {
                                        cat3.value = `${cat2.value} > ${cat3.name}`;
                                        this.searchList.push(cat3);
                                    });
                                }
                            });
                        }
                    });

                    this.listBuild();
                })
                .catch(err => {
                    this.$message.error(err.data.message);
                });
        },
        hintRender: function () {
            return this.$createElement(
                'HelpHint',
                {
                    props: {
                        content: '序号越大，排序越靠前',
                    },
                },
                '排序'
            );
        },
        cancel: function (index, key) {
            this.$set(this[key][index], 'popover', false);
        },
        sortChange: function (index, key) {
            this[key][index].popover = false;
            let item = this.$heshop.utils.deepClone(this[key][index]);
            item.sort = this.sort;
            this.$heshop
                .group('put', { id: this[key][index].id, include: 'goods' }, item)
                .then(() => {
                    this[key][index].sort = this.sort;
                })
                .catch(err => {
                    this.$message.error(err.data[0].message);
                });
        },
        editSort: function (item) {
            this.sort = item.sort;
        },
        deleteGroup(e) {
            this.$confirm('分类删除请谨慎，确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                this.$heshop
                    .group('delete', this[e.key][e.index].id, { include: 'goods' })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.$delete(this[e.key], e.index);
                    })
                    .catch(err => {
                        this.$message.error(err.data.message);
                    });
            });
        },
        showChange(e) {
            let is_show = this[e.key][e.index].is_show == 1 ? 0 : 1;
            this.$heshop
                .group('put', { id: this[e.key][e.index].id, include: 'goods' }, { is_show })
                .then(() => {
                    this.childrenShowChange(e, is_show);
                    let message = is_show == 1 ? '显示成功' : '隐藏成功';
                    this.$message.success(message);
                })
                .catch(err => {
                    this.$message.error(err.data.message);
                });
        },
        childrenShowChange(e, is_show) {
            let item = this[e.key][e.index];
            item.is_show = is_show;

            if (item.children) {
                item.children.forEach(item2 => {
                    item2.is_show = is_show;
                    if (item2.children) {
                        item2.children.forEach(item3 => {
                            item3.is_show = is_show;
                        });
                    }
                });
            }
        },
        /**
         * 控制分类显示隐藏
         * @param  {[type]} val  is_run是否执行 show为false时,index匹配的显示其余隐藏  show为true时全部显示
         * @return {[void]}      [description]
         */
        catShow(val1, val2, val3) {
            if (val1.is_run) {
                this.first.forEach((v, k) => {
                    if (val1.show) {
                        v.show = true;
                    } else {
                        v.show = val1.index === k;
                    }
                });
            }

            if (val2.is_run) {
                this.second.forEach((v, k) => {
                    if (val2.show) {
                        v.show = true;
                    } else {
                        v.show = val2.index === k;
                    }
                });
            }

            if (val3.is_run) {
                this.third.forEach((v, k) => {
                    if (val3.show) {
                        v.show = true;
                    } else {
                        v.show = val3.index === k;
                    }
                });
            }
        },
        getSearch() {
            let show_val1 = { is_run: false, show: false, index: -1 };
            let show_val2 = { is_run: false, show: false, index: -1 };
            let show_val3 = { is_run: false, show: false, index: -1 };
            if (this.search) {
                let search_value = null;
                if (this.searchChoose) {
                    //有选择输入框下拉内容,优先使用选择内容
                    search_value = this.searchChoose;
                } else {
                    //没有选择时从列队中全民匹配
                    this.searchList.forEach(v => {
                        if (v.value == this.search) {
                            search_value = v;
                        }
                    });
                }

                if (search_value) {
                    let path = search_value.path.split('-').map(Number);
                    let level = path.length;
                    this.first.forEach((v, k) => {
                        if (level > 1) {
                            if (v.id === path[1]) {
                                this.chooseIndex.first = k;
                                show_val1 = { is_run: true, show: false, index: k };
                            }
                        } else {
                            //内容结果为1级时,使用内容id作为判断依据
                            if (v.id === search_value.id) {
                                this.chooseIndex.first = k;
                                this.chooseIndex.second = 0;
                                show_val1 = { is_run: true, show: false, index: k };
                                show_val2 = { is_run: true, show: true, index: -1 };
                                show_val3 = { is_run: true, show: true, index: -1 };
                            }
                        }
                    });

                    if (level > 1) {
                        this.first[this.chooseIndex.first].children.forEach((v1, k1) => {
                            if (level > 2) {
                                //内容结果大于2级时,用path[2]作为判断依据
                                if (v1.id === path[2]) {
                                    this.chooseIndex.second = k1;
                                    show_val2 = { is_run: true, show: false, index: k1 };
                                }
                            } else {
                                //内容结果为2级时,使用内容id作为判断依据
                                if (v1.id === search_value.id) {
                                    this.chooseIndex.second = k1;
                                    show_val2 = { is_run: true, show: false, index: k1 };
                                    show_val3 = { is_run: true, show: true, index: -1 };
                                }
                            }
                        });
                    }

                    if (level > 2) {
                        this.first[this.chooseIndex.first].children[[this.chooseIndex.second]].children.forEach(
                            (v2, k2) => {
                                if (v2.id === search_value.id) {
                                    show_val3 = { is_run: true, show: false, index: k2 };
                                }
                            }
                        );
                    }
                    this.listBuild();
                } else {
                    this.second = [];
                    this.third = [];
                    show_val1 = { is_run: true, show: false, index: -1 };
                }
            } else {
                this.chooseIndex = {
                    first: 0,
                    second: 0,
                };
                show_val1 = { is_run: true, show: true, index: -1 };
                show_val2 = { is_run: true, show: true, index: -1 };
                show_val3 = { is_run: true, show: true, index: -1 };
                this.listBuild();
            }
            this.catShow(show_val1, show_val2, show_val3);
        },
        handleSelect(e = null) {
            this.searchChoose = e;
            this.getSearch();
        },
        querySearch: function (queryString, cb, key) {
            let catList = this[key];
            let results = queryString
                ? catList.filter(function (restaurant) {
                      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0;
                  })
                : catList;

            this.searchChoose = null; //输入内容改变时,将之前选择结果清空

            let return_data = JSON.parse(JSON.stringify(results)); //引用问题阻隔
            cb(return_data);
        },
        getSetting() {
            this.$heshop
                .search('post', { include: 'setting' }, { keyword: 'goods_group_setting' })
                .then(res => {
                    if (res) {
                        this.group_show = this.style_index = res.content.group_show;
                    }
                })
                .catch(err => {
                    this.$message.error(err.data.message);
                });
        },
        enable: function () {
            let data = {
                keyword: 'goods_group_setting',
                content: {
                    group_show: this.style_index,
                },
            };
            this.$heshop
                .setting('post', data)
                .then(() => {
                    this.group_show = this.style_index;
                })
                .catch(err => {
                    this.$message.error(err.data.message);
                });
        },
    },
};
</script>
<style lang="less" scoped="true">
@import './group.less';

.he-input {
    width: 367px;
    margin-right: 24px;

    /deep/ .el-input-group {
        width: 100%;
    }
}

.he-input /deep/ .el-input-group__append {
    padding: 0 15px;

    .el-button {
        padding: 9px 20px;
    }
}

.he-attr__header {
    min-width: 400px;
    margin-right: 25px;
    height: 48px;
    line-height: 48px;
    background: rgba(98, 60, 235, 0.05);
    border-radius: 4px;
    text-align: center;
}

.he-attr__header .he-text {
    font-size: 14px;
    font-weight: 400;
    color: #623ceb;
    opacity: 0.85;
}

.he-attr__body {
    overflow: hidden;
    min-width: 400px;
    margin-right: 25px;
    height: 520px;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-top: 8px;

    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden !important;
    }

    .he-group__empty {
        text-align: center;
        color: #808080;
        margin-top: 40px;
    }

    .he-attr__group {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #dcdfe6;

        span {
            font-size: 14px;
            display: inline-block;
            opacity: 0.85;

            i {
                color: #bbbfc8;
            }
        }

        .he-group__name {
            margin-left: 20px;
            width: 35%;
        }

        .he-group__sort {
            text-align: center;
            width: 15%;
        }

        .he-group__handle {
            margin-right: 20px;
            text-align: right;
            width: 35%;

            .le-icon {
                font-size: 16px;
                color: #8c8c8c;
                margin-left: 15px;
                cursor: pointer;
            }
        }
    }

    .he-group__title {
        color: #000;
        background: #f3f5f7;
        border-bottom: none;
    }

    .he-title {
        font-size: 14px;
        font-weight: 400;
        color: #010101;
        opacity: 0.85;
        margin-left: 4px;
    }

    .el-button--text.he-class__button-new.el-button--mini {
        padding: 0 5px;
    }
}

.le_goods__main-sortedit {
    opacity: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
    color: #bbbfc8;
}

.le_goods__main-sort:hover .le_goods__main-sortedit {
    opacity: 1;
}

.he-style {
    padding: 0 12px;
    margin-bottom: 16px;
    width: 184px;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;

    .he-text {
        width: 100px;
        height: 15px;
        font-size: 14px;
        font-weight: 400;
        margin-left: 12px;
    }

    .le-icon {
        width: 48px;
        height: 48px;
    }
}

.he-style__yes {
    color: #623ceb;
    border: 1px solid #623ceb;

    .he-text {
        color: #623ceb;
    }
}

.he-style__no {
    color: #dcdfe6;
    border: 1px solid #dcdfe6;

    .he-text {
        color: #000000;
        opacity: 0.65;
    }
}

.he-preview {
    width: 330px;
    height: 600px;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 40px;

    > img {
        width: 300px;
        height: 534px;
        margin: 33px 15px;
    }
}

.he-display-style {
    padding: 20px;
}

.he-using {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #53c41a;

    .he-using-icon {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #53c41a;
        border-radius: 50%;
        margin-right: 8px;
    }
}

.he-enable {
    margin: 24px 0;
}

.he-style__preview {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.he-button {
    display: flex;
    align-items: right;
}

.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>
